<template>
  <el-submenu :index="indexString">
    <template slot="title">
      <i class="el-icon-db-database"></i>
      <span slot="title">{{database.name}}</span>
      <el-checkbox v-model="checkAll"/>
    </template>

    <Table v-for="(table,index) in database.tables"
           :parentIndex="indexString" :database="database" :index="index" :key="index" :table="table"/>

  </el-submenu>
</template>

<script>
  import Table from "./Table";

  export default {
    props: ["database", "index", "parentIndex"],
    name: "Database",
    components: {Table},
    computed: {
      checkAll: {
        get() {
          let tables = this.database.tables;
          let checkedTableCount = tables.filter(table => table.checked).length;
          return checkedTableCount === tables.length && checkedTableCount > 0;
        }, set(flag) {
          this.database.checked = flag;
          this.$store.dispatch("setCurrentDatabase", this.database);
          this.$store.dispatch("checkAll", this.database);
        }
      }
    }, data() {
      return {
        indexString: this.parentIndex + "-" + (this.index + 1)
      }
    }
  }
</script>

<style scoped>
  .el-checkbox {
    float: right;
    margin-right: 15px;
  }
</style>
